<template>
  <div>
    <div class="other">
      <div class="other_nva">
               <span class="border">
                 <img src="../../assets/login-register/weChat.png" alt="">
               </span>
        <span class="text">微信</span>
      </div>
      <div class="other_nva">
               <span class="border">
                 <img src="../../assets/login-register/QQ.png" alt="">
               </span>
        <span class="text">QQ</span>
      </div>
      <div class="other_nva">
               <span class="border">
                 <img src="../../assets/login-register/micro-blog.png" alt="">
               </span>
        <span class="text">微博</span>
      </div>
      <div class="other_nva">
               <span class="border">
                 <img src="../../assets/login-register/netEasy.png" alt="">
               </span>
        <span class="text">网易邮箱</span>
      </div>
    </div>
  </div>

</template>

<script>
     export default {
          name: "index"
     }
</script>

<style scoped>

  .other{
    width: 90%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 5%;
  }
  .other_nva{
    width: 25%;
    height: 100px;
    float: left;
  }
  .border{
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 45px;
    border: 1px solid #b8b7b7;
    margin-top: 15px;
    margin-left: 16px;
  }
  .border img{
    display: block;
    width: 28px;
    height: 25px;
    margin-top: 13px;
    margin-left: 11px;
  }
  .text{
    display:block;
    height: 20px;
    font-size: 14px;
    color: #9b9a9a;
    margin-top: -10px;
    text-align: center;
  }
</style>
